<template>
  <div class="info">
    <mu-appbar style="width: 100%;" color="white" text-color="primary">
      <mu-button icon slot="left">
        <header-back></header-back>
      </mu-button>
      个人资料
    </mu-appbar>
    <mu-paper class="paper">
      <mu-list>
        <mu-list-item>
          <mu-list-item-title>手机账户</mu-list-item-title>
          <mu-list-item-title class="right-title">{{info.phone}}</mu-list-item-title>
          <mu-list-item-action>
            <mu-button icon>
              <!--<mu-icon color="#929292" value="chevron_right"></mu-icon>-->
            </mu-button>
          </mu-list-item-action>
        </mu-list-item>
        <mu-divider class="divider"></mu-divider>
        <mu-list-item button ripple>
          <mu-list-item-title style="width: 40%">邮箱账户</mu-list-item-title>
          <mu-list-item-title class="right-title">{{info.email ? info.email : '未绑定'}}</mu-list-item-title>
          <mu-list-item-action>
            <mu-button icon>
              <!--<mu-icon color="#929292" value="chevron_right"></mu-icon>-->
            </mu-button>
          </mu-list-item-action>
        </mu-list-item>
      </mu-list>
    </mu-paper>
    <mu-paper class="paper">
      <mu-list>
        <mu-list-item button ripple @click="openFullScreenDialog('修改姓名','realname',profileInfo.realname)">
          <mu-list-item-title>真实姓名</mu-list-item-title>
          <mu-list-item-title class="right-title">{{profileInfo.realname? profileInfo.realname: '未填写'}}
          </mu-list-item-title>
          <mu-list-item-action>
            <mu-button icon>
              <mu-icon color="#929292" value="chevron_right"></mu-icon>
            </mu-button>
          </mu-list-item-action>
        </mu-list-item>
        <mu-divider class="divider"></mu-divider>
        <mu-list-item button ripple @click="openFullScreenDialog('修改昵称','nickname',profileInfo.nickname)">
          <mu-list-item-title>昵称</mu-list-item-title>
          <mu-list-item-title class="right-title">{{profileInfo.nickname ? profileInfo.nickname: '未填写'}}
          </mu-list-item-title>
          <mu-list-item-action>
            <mu-button icon>
              <mu-icon color="#929292" value="chevron_right"></mu-icon>
            </mu-button>
          </mu-list-item-action>
        </mu-list-item>
        <mu-divider class="divider"></mu-divider>
        <mu-list-item button ripple>
          <mu-list-item-title>性别</mu-list-item-title>
          <mu-list-item-title class="right-title">{{profileInfo.sex ? profileInfo.sex === 1 ? '男' : profileInfo.sex ===
            0 ? '女' : '': '未填写'}}
          </mu-list-item-title>
          <mu-list-item-action>
            <mu-button icon>
              <!--<mu-icon color="#929292" value="chevron_right"></mu-icon>-->
            </mu-button>
          </mu-list-item-action>
        </mu-list-item>
        <mu-divider class="divider"></mu-divider>
        <mu-list-item button ripple @click="openFullScreenDialog('修改固定电话','fixedTel',profileInfo.fixedTel)">
          <mu-list-item-title>固定电话</mu-list-item-title>
          <mu-list-item-title class="right-title">{{profileInfo.fixedTel ? profileInfo.fixedTel: '未填写'}}
          </mu-list-item-title>
          <mu-list-item-action>
            <mu-button icon>
              <mu-icon color="#929292" value="chevron_right"></mu-icon>
            </mu-button>
          </mu-list-item-action>
        </mu-list-item>
        <mu-divider class="divider"></mu-divider>
        <mu-list-item button ripple @click="openAlertDialog">
          <mu-list-item-title>生日</mu-list-item-title>
          <mu-list-item-title class="right-title">{{profileInfo.birthday ?
            util.formatyyyyMMddDate(profileInfo.birthday):
            '未填写'}}
          </mu-list-item-title>
          <mu-list-item-action>
            <mu-button icon>
              <mu-icon color="#929292" value="chevron_right"></mu-icon>
            </mu-button>
          </mu-list-item-action>
        </mu-list-item>
      </mu-list>
    </mu-paper>
    <mu-dialog width="360" transition="slide-bottom" fullscreen :open.sync="openFullScreen">
      <mu-appbar :z-depth="0" color="primary" :title="dialogTitle">
        <mu-button slot="left" icon @click="closeFullScreenDialog">
          <mu-icon value="close"></mu-icon>
        </mu-button>
        <mu-button slot="right" flat @click="saveFullScreenDialog">
          保存
        </mu-button>
      </mu-appbar>
      <div style="padding: 24px;">
        <mu-text-field full-width v-model="dialogValue" action-icon="close"
                       :action-click="cleanField"></mu-text-field>
      </div>
    </mu-dialog>
    <mu-dialog title="请选择" width="600" max-width="80%" :esc-press-close="false"
               :overlay-close="false" :open.sync="openAlert">
      <mu-date-input icon="today" type="date" v-model="birthday" label-float full-width
                     container="dialog"></mu-date-input>
      <mu-button slot="actions" flat color="primary" @click="closeAlertDialog">取消</mu-button>
      <mu-button slot="actions" flat color="primary" @click="sureAlertDialog">确认</mu-button>
    </mu-dialog>
  </div>
</template>
<script>
  import headerBack from '@/components/headerBack';

  export default {
    name: 'profile',
    data() {
      return {
        dialogValue: '',
        dialogField: '',
        dialogTitle: '',
        openFullScreen: false,
        birthday: '',
        openAlert: false,
        title: '',
        declareList: [],
        num: 10,
        refreshing: false,
        loading: false,
        search: '',
        warning: '向上滑动查看更多',
        info: {
          userName: '',
          phone: '',
          email: ''
        },
        profileInfo: {
          realname: '',
          nickname: '',
          sex: 2,
          fixedTel: '',
          birthday: ''
        }
      }
    },
    components: {
      headerBack
    },
    methods: {
      cleanField() {
        this.dialogField = '';
      },
      openFullScreenDialog(title, field, value) {
        this.dialogTitle = title;
        this.dialogField = field;
        this.dialogValue = value;
        this.openFullScreen = true;
      },
      closeFullScreenDialog() {
        this.openFullScreen = false;
      },
      saveFullScreenDialog() {
        let param = {};
        param[this.dialogField] = this.dialogValue;
        this.postRequest("/user/editProfile", param).then(res => {
          if (res.code === 200) {
            this.getProfile();
            this.openFullScreen = false;
          }
        });
      },
      openAlertDialog() {
        this.birthday = this.profileInfo.birthday;
        this.openAlert = true;
      },
      closeAlertDialog() {
        this.openAlert = false;
      },
      sureAlertDialog() {
        let param = {
          birthday: this.birthday
        };
        this.postRequest("/user/editProfile", param).then(res => {
          if (res.code === 200) {
            this.getProfile();
            this.openAlert = false;
          }
        });
      },
      getData() {
        let _self = this;
        this.postRequest("/user/info").then(res => {
          if (res.code === 200) {
            _self.info = res.data;
          }
        });
      },
      getProfile() {
        let _this = this;
        this.postRequest('/user/profile').then(res => {
          if (res.code === 200) {
            _this.profileInfo = res.data;
          }
        })
      }
    },
    mounted: function () {
      this.getData();
      this.getProfile();
    }
  }
</script>

<style scoped lang="less">

  .info {
    position: fixed;
    top: 0;
    width: 100%;
    overflow: auto;
    height: 100%;
    z-index: 999;
    background-color: #f9f9f9;
  }

  .load-more-wrap {
    width: 100%;
    /*height: 100%;*/
    display: flex;
    flex-direction: column;
    .mu-app-bar {
      width: 100%;
    }
  }

  .load-more-content {
    flex: 1;
    overflow: auto;
    padding: 10px 0 10px 0;
    -webkit-overflow-scrolling: touch;
    background-color: #3f51b5;
    color: #ffffff;
  }

  .paper {
    margin-bottom: 10px;
    padding: 1rem;
  }

  .divider {
    background-color: #f5f5f5;
  }

  .right-title {
    text-align: right;
    margin-right: -2.5rem;
    color: #929292
  }
</style>
